<template>
  <div
    :class="hoverclass"
    :style="{ paddingRight: `${operationWidth ? operationWidth + 10 : 10}px` }"
    class="com-global-cell"
  >
    <slot />
    <div
      v-if="operationWidth"
      :style="{ width: `${operationWidth}px` }"
      class="attachment w-flex-center"
    >
      <slot name="option" />
    </div>
  </div>
</template>

<script lang="ts">
import { Vue, Component, Prop } from 'vue-property-decorator'

@Component({
  name: 'ComGlobalCell'
})
export default class ComGlobalCell extends Vue {
  @Prop({ type: Boolean, default: true }) hover!: boolean
  @Prop({ type: Number, default: 0 }) operationWidth!: boolean

  get hoverclass () {
    return {
      'com-global-cell-hover': this.hover,
      'w-hover-glow': this.hover,
      'w-pointer': this.hover
    }
  }
}
</script>

<style lang="less" scoped>
.com-global-cell {
  margin-bottom: 10px;
  padding: 10px;
  border-radius: 4px;
  background-color: #efefef;
  position: relative;
  display: block;
  > .attachment {
    position: absolute;
    right: 10px;
    top: 0px;
    height: 100%;
  }
}
.com-global-cell-hover:hover {
  background: -webkit-linear-gradient(
    180deg,
    rgba(223, 190, 106, 0.8),
    rgba(146, 111, 52, 0.8),
    rgba(34, 34, 34, 0),
    rgba(34, 34, 34, 0)
  );
  background: linear-gradient(
    270deg,
    rgba(223, 190, 106, 0.8),
    rgba(146, 111, 52, 0.8),
    rgba(34, 34, 34, 0),
    rgba(34, 34, 34, 0)
  );
  background-size: 300% 300%;
  background-position: 99% 50%;
}
</style>

<style lang="less">
.com-global-cell-hover:hover {
  .hover-color {
    color: #fff !important;
  }
}
</style>
